<!--
 * @Description: 
 * @Author: xiao li
 * @Date: 2022-08-02 19:03:28
 * @LastEditTime: 2022-11-01 17:53:10
 * @LastEditors: xiao li
-->
<template>
  <div
    :style="{
      background: o.data.style.background,
      paddingTop: o.data.style.whiteSpace / 2 + 'px',
      paddingBottom: o.data.style.whiteSpace / 2 + 'px',
      paddingLeft: o.data.style.wingBlank / 2 + 'px',
      paddingRight: o.data.style.wingBlank / 2 + 'px'
    }"
  >
    <el-carousel
      :height="o.data.row.number === 1 ? '70px' : '150px'"
      indicator-position="none"
    >
      <el-carousel-item v-for="(item, index) in formatList" :key="index">
        <div class="column-box">
          <div
            class="column-item"
            v-for="(bitem, bindex) in item"
            :key="bindex"
            :style="{
              width: 100 / o.data.col.number + '%',
              color: o.data.style.fontColor,
              marginTop: bindex < o.data.col.number ? '0px' : '10px'
            }"
          >
            <img class="column-img" :src="bitem.img[0].url" />
            <div class="column-text" :style="{ color: o.data.style.fontColor }">
              {{ bitem.title }}
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'column',
  props: {
    o: Object
  },
  computed: {
    formatList () {
      let o = JSON.parse(JSON.stringify(this.o))
      let list = o.data.columnList
      let index = 0
      let length = list.length
      let newList = []
      let colNum = o.data.col.number
      let rowNum = o.data.row.number
      let formatRowNum = length <= colNum ? 1 : rowNum

      let count = formatRowNum * colNum
      while (index < length) {
        newList.push(list.slice(index, index += count))
      }
      return newList
    }
  },
  methods: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.column-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  overflow: hidden;
  box-sizing: content-box;
}
.column-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.column-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}
.column-text {
  font-size: 12px;
  text-align: center;
  color: #999;
  width: 100%;
  padding: 0 10%;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
